<template>
	<view class="box">
		<view class='status-navbar-fixed'></view>
		<loading :status="loadStatus"></loading>
		<set-lang></set-lang>
		<view class="app-logo" v-if="loginStyle == 'text'">
			<view class="tit-bt">{{i18n.login}}</view>
			<view class="tit-ct">{{i18n.welcome}} {{appName}}</view>
		</view>
		<view class="app-logo" v-if="loginStyle == 'img'">
			<image src="../../static/img/indexImg/applogo.png" mode="aspectFill" class='logo-icon'></image>
			<view class="app-tit">{{appName}}</view>
		</view>
		<view class="box-content">
			<view class="form_ct_list " :class="!!focus1 ? 'on' : ''">
				<input @focus="focus1 = true" @blur="focus1 = false" type="text" :placeholder="i18n.enterAccount"  class="input" v-model="account" />
			</view>
			<view class="form_ct_list " :class="!!focus2 ? 'on' : ''">
				<input @focus="focus2 = true" @blur="focus2 = false"  :password="flag == true?false:true" :placeholder="i18n.enterPass"  class="input" v-model="pw" />
				<text class="iconfont" @click="flag = !flag">{{flag == true ? '&#xe648;': '&#xe635;'}}</text>
			</view>
			<view class="mt-70">
				<button class="btn-block" hover-class="btn-hover" :class="lock ? 'disabled' : ''" type="primary" @tap="formSubmit">{{i18n.login}}</button>
			</view>
			<view class="text_tips">
				<view @tap="forgetClick" class="link">{{i18n.forgetPass}}</view>
				<span>|</span>
				{{i18n.noAccount}}?
				<navigator class="link" hover-class="none" open-type="redirect" url="register">{{i18n.registered}}</navigator>
			</view>
		</view>
        <u-popup v-model="validate" mode="bottom" border-radius="10">
			<view class="validate-body">
				<view class="title">{{i18n.verification}}</view>
				<view class="content" v-if="validateType !== 'google'">
					<view>{{validateAccount}}</view>
					<view class="input-container">
						<input type="number" :placeholder="i18n.enterCode" v-model="code" maxlength="6">
						<val-code :step='step' @on-send='djs'></val-code>
					</view>
				</view>
				<view class="content" v-else>
					<view class="input-container">
						<input  type="number" :placeholder="i18n.googleCode" v-model="code" maxlength="6">
					</view>
				</view>
				<button class="btn-block" @tap="submit">{{i18n.confirm}}</button>
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import UpdateVersion from '@/utils/update.js'
	import {mapState,mapMutations} from 'vuex'
	import {appName,loginStyle} from '@/config.js'
	import loading from '../../components/loading.vue'
	import valCode from '../../components/valCode.vue'
	import setLang from '../../components/setLang.vue'
	export default {
		data() {
			return {
				appName,
				loginStyle,
				account: "",
				pw: "",
				validateType: '',
				validateAccount: '--',
				code: '',
				loadStatus: 'noMore',
				language: '',
				lock: false,
				focus1: false,
				focus2: false,
				step: 1,
				flag:false,
				validate:false
			};
		},
		computed: {
			...mapState(['logged', 'tabbarView']),
            i18n() {
            	return this.$t('login');
            },
		},
		directives: {
			focus: {
				// 指令的定义
				inserted: function(el) {
					el.focus()
				}
			}
		},
		components: {
			loading,
			valCode,
			setLang
		},
		onLoad() {
			//#ifdef APP-PLUS
			var v = new UpdateVersion()
			v.getNewData()
			//#endif
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			formSubmit() {
				if (this.lock) return false;
				if (!this.account) {
					this.$toast(this.$t('login.enterAccount'));
					return false;
				}
				if (!this.pw) {
					this.$toast(this.$t('login.enterPass'));
					return false;
				}
				var data = {
					password: this.pw,
					account: this.account
				};
				this.lock = true;
				this.loadStatus = 'loading';
				this.$post("api/user/login", data).then(res => {
					if (res.needverify) {
						uni.setStorageSync('token', res.token);
						this.validateType = res.type;
						this.validateAccount = res.account;
						this.code = '';
						this.validate = true;
						uni.hideKeyboard()
					} else {
						this.$toast(res.msg)
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('uid', res.data.user_id);
						this.loginCallback();
					}
				}).catch(res => {
					this.verify()
					this.captcha = ''
				}).finally(res => {
					this.lock = false;
					this.loadStatus = 'noMore';
				})
			},
			submit() {
				if (this.lock) return false;
				if (!this.code) {
					this.$toast(this.validateType !== 'google' ? this.$t('login.googleCode') : this.$t('login.enterCode'));
					return false;
				}
				var data = {
					token: uni.getStorageSync('token'),
					code: this.code
				}
				this.lock = true;
				this.loadStatus = 'loading';
				this.$post("api/user/login/verification", data).then(res => {
					this.$toast(res.msg);
					this.validate = false;
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('uid', res.data.user_id);
					this.loginCallback();
				}).finally(res => {
					this.lock = false;
					this.loadStatus = 'noMore';
				})
			},
			djs() {
				this.step = 2;
				this.$post('user/send/login', {
					token: uni.getStorageSync('token')
				}).then(res => {
					this.step = 3;
					this.$toast(res.msg);
				}).catch(res => {
					this.step = 1;
				})
			},
			loginCallback() {
				setTimeout(()=>{
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1500)
			},
			forgetClick() {
				uni.navigateTo({
					url: 'forget'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		min-height: 100vh;
		overflow: hidden;
	}
    .code-img{
    	width: 200upx;
    	height: 64upx;
    }
	.return {
		position: absolute;
		/* #ifdef APP-PLUS */
		top: calc(30upx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		top: 20upx;
		/* #endif */
		left: 30upx;
		color: var(--txt-color);
		font-size: 50upx;
	}

	.box-content {
		padding: 0 30upx;
	}

	.validate-body {
		background-color: #fff;
		padding: 30upx;
		font-size: 28upx;
		.content {
			margin: 40upx 0 30upx;
			color: var(--txt-gray-color);
		}
		.input-container {
			display: flex;
			height: 80upx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);

			input {
				flex: 1;
				font-size: 28upx;
				color: #333;
				min-height: auto;
			}
		}
	}

	.form_ct_list {
		height: 100upx;
		position: relative;
		margin: 30upx 0upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border);
		&.on {
			border-color: var(--theme-color);
		}

		.input {
			font-size: 28upx;
			color: var(--txt-color);
			min-height: auto;
			flex: 1;
		}
        .iconfont{
			color: var(--txt-gray-color);
		}
	}

	.text_tips {
		text-align: center;
		font-size: 28upx;
		margin-top: 30px;

		.link {
			color: var(--theme-color);
			font-weight: bold;
			display: inline-block;
			margin-left: 10upx;
		}

		span {
			margin: 0 20upx;
		}
	}
</style>
